.li {
  background: var(--color-background);
  color: var(--color-text);
  display: flex;
  border-left: 2px solid transparent;
}

.mouse {
  .li:hover {
    background: var(--color-gray-50);
    cursor: pointer;

    @media (prefers-color-scheme: dark) {
      background: var(--color-gray-100);
    }
  }
}

.active {
  border-left: 2px solid var(--color-blue-500);
}

.line {
  margin-top: -0.75rem;
  position: absolute;
  width: 100%;
  z-index: 2;
}

.padding-avatar {
  padding-top: 0.75rem;
}

.padding-top {
  padding-top: 1.25rem;
}

.padding-bottom {
  padding-bottom: 1.25rem;
}

.padding-left {
  padding-left: 0.625rem;
}

.divider {
  border-top: 1px solid var(--color-gray-200);
}